<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通渭县公安局执法办案管理中心</title>
    <style>

        /* 全局样式，去除默认的内外边距 */
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            background: url("images/bg.png");
            background-size: 100% 100%;
            /* 图片覆盖整个 div，保持比例 */
            background-position: center;
            background-repeat: no-repeat;
        }

        .circleClik {
            width: 1.1875rem;
            height: 1.1875rem;
            border-radius: 50%;
            border: 1px solid #06DEF9;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 0.375rem;
        }

        .circleClik div {
            width: 0.6875rem;
            height: 0.6875rem;
            background: #06DEF9;
            border-radius: 50%;
        }

        .circleNoClik {
            width: 1.1875rem;
            margin-right: 0.375rem;
            height: 1.1875rem;
            color: rgba(12, 96, 137, 1);
            border-radius: 50%;
            border: 1px solid #0C6089;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .circleNoClik div {
            width: 0.6875rem;
            height: 0.6875rem;
            background: #0C6089;
            border-radius: 50%;
        }

        .circleBox {
            /*font-size: 1.25rem;*/
            justify-content: center;
            align-items: center;
            align-content: center;
            display: flex;
        }

        .top-rightBox {
            width: 98%;
            height: 40vh;
            background: rgba(5, 45, 102, 0);
            border: 1px solid #0B4C71;
        }

        .top-left-topBox {
            justify-content: space-between;
            margin: 1.875rem;
            display: flex;
        }

        .input {
            color: #ffffff;
            box-shadow: inset 0 0 1.25rem rgba(111, 199, 255, 1);
            width: 10.875rem;
            height: 1.5625rem;
            font-size: 0.8rem;
            border: 1px solid #6FC7FF;
        }

        .input svg {
            position: relative;
            top: 0.1875rem;
            left: 0.25rem;
        }

        .box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .table {
            margin: 0.625rem 1.875rem;
            background: #007bff;
            height: 1.5625rem;
        }

        .table1 {
            height: 100%;
            font-size: 1rem;
            justify-content: space-around;
            align-items: center;
            color: #ffffff;
            display: flex;
            margin: 0.9375rem 0;
        }

        .table1 div:nth-child(1) {
            width: 20%;
            text-align: center;
        }

        .table1 div:nth-child(2) {
            width: 20%;
            text-align: center;
        }

        .table1 div:nth-child(3) {
            width: 20%;
            text-align: center;
        }

        .info-table {
            width: 25rem;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
        }

        /* 表头样式 */
        .info-table th {
            background-color: #334c68;
            color: white;
            text-align: left;
            padding: 0.625rem;
            border: 1px solid #44648e;
        }

        /* 表格数据行样式 */
        .info-table td {
            background-color: #233854;
            color: white;
            padding: 0.625rem;
            border: 1px solid #44648e;
        }


        /* 整体容器，使用 flex 布局实现上下结构 */
        .container {
            display: flex;
            z-index: 1;
            flex-direction: column;
            justify-content: center;
            height: 90vh;
            width: 96%;
        }

        /* 上方区域 */
        .top {

            margin: 0;
            height: 100vh;
            display: flex;
            flex: 1;

        }

        /* 上方左侧区域，使用 flex 布局细分左上和左中 */
        .top-left {
            display: flex;
            flex-direction: column;
            width: 26%;
        }

        /* 左上区域 */
        .top-left-top {
            flex: 1;
            margin-bottom: 0.4375vw;
            margin-right: 0.4375vw;
            background: url("images/bg(1).png");
            background-size: 100% 100%;
            /* 图片覆盖整个 div，保持比例 */
            background-position: center;
            background-repeat: no-repeat;
        }

        /* 左中区域 */
        .top-left-middle {
            flex: 1.3;
            position: relative;
            margin-right: 0.4375vw;
            background-size: auto 100%;
            background: url("images/bg(2).png");
            background-size: 100% 100%;
            /* 图片覆盖整个 div，保持比例 */
            background-position: center;
            background-repeat: no-repeat;
        }

        /* 上方中间区域 */
        .top-middle {
            background-size: auto 100%;
            width: 59%;
            background: url("images/bg(6).png");
            background-size: 100% 100%;
            /* 图片覆盖整个 div，保持比例 */
            background-position: center;
            background-repeat: no-repeat;
        }

        /* 上方右侧区域 */
        .top-right {
            width: 28%;
            margin-left: 0.4375vw;
            background: url("images/bg(4).png") 100% 100%;
            background-size: 100% 100%;
            /* 图片覆盖整个 div，保持比例 */
            background-position: center;
            background-repeat: no-repeat;
        }

        /* 下方区域 */
        .bottom {
            display: flex;
            flex: 0.4;
            margin-top: 0.4375vw;
        }

        /* 下方左侧区域 */
        .bottom-left {
            background: url("images/bg(3).png") 100% 100%;
            background-size: 100% 100%;
            /* 图片覆盖整个 div，保持比例 */
            background-position: center;
            background-repeat: no-repeat;
            width: 22%;
        }

        /* 下方右侧区域 */
        .bottom-right {
            display: flex;
            margin-left: 0.4375vw;
            background: url("images/bg(5).png") 100% 100%;
            background-size: 100% 100%;
            /* 图片覆盖整个 div，保持比例 */
            background-position: center;
            flex-direction: column;
            align-items: center;
            background-repeat: no-repeat;
            width: 78%;
        }

        .top-left-middle-Cont {
            margin: 1.875rem 2.5rem;
            margin-right: 2.5rem;
        }

        .top-left-middle1 {
            display: flex;

        }

        .top-left-middle1Left {
            display: flex;
            margin-top: 1.875rem;
            color: rgba(242, 246, 255, 1);
            flex-direction: column;
            justify-content: space-evenly
        }

        .top-left-middle2 {
            line-height: 1.5625rem;
            color: rgba(242, 246, 255, 1);
        }

        .top-left-middle3 {
            position: absolute;
            bottom: 8%;
            left: 1.875rem;
            font-size: 1rem;
            color: #06DEF9;
            display: flex;
            width: 100%;
        }

        .top-left-middle3 div {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .containerTop {
            width: 100%;
            position: relative;
            height: 2.5vw
        }

        .banTitle {
            position: absolute;
            top: 0.625rem;
            left: 44%;
        }

        #date-info {
            position: absolute;
            top: 0.0625vh;
            left: 0.125rem;
            font-size: 1.25rem;
            color: #FFFFFF;
        }

        .separator {
            display: inline-block;
            width: 0.75vw;
            /* 可根据需要调整宽度 */
        }

        #time-info {
            position: absolute;
            top: 0.0625vh;
            left: 0.75rem;
            font-size: 1.25rem;
            color: #FFFFFF;
        }

        .titleName {
            color: #FFFFFF;
            font-size: 1.3rem;
            width: 100%;
            text-align: center;
            margin-top: 0.0125vw;
            text-shadow: 0 0 0.3125rem #007bff, 0 0 0.625rem #007bff, 0 0 1.25rem #007bff;
        }

        .bottom-right-cont {
            height: 80%;
            margin: 1.875rem;
            align-content: space-around;
            width: 90%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .icon1 {
            width: 22%;
            height: 37%;
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #FFFFFF;
            justify-content: center;

        }

        .icon1 img {
            margin-right: 0.9375rem;

        }

        .icon1 .img {
            width: 20%;
            /* width: 60%; */

        }

        .icon1 .text {
            width: 36%;
            font-size: 0.875rem;
            text-align: center;
            /* width: 60%; */

        }

        #chart {
            width: 100%;
            height: 100%;
        }

        .admin {
            position: absolute;
            top: 0.8125rem;
            right: 5%;
            font-size: 1.25rem;
            color: #FFFFFF;
        }
    </style>
</head>

<body>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<div class="box">
    <div class="containerTop">
        <img src="images/title.png" alt="" style="width: 100%;">
        <img src="images/ban.png" class="banTitle" style="width: 10vw;">
        <p id="date-info"></p>
        <p id="time-info"></p>
        <div class="admin">
            <svg t="1742010493855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2780" width="16" height="16"><path d="M512 300.586667m-300.586667 0a300.586667 300.586667 0 1 0 601.173334 0 300.586667 300.586667 0 1 0-601.173334 0Z" p-id="2781" fill="#ffffff"></path><path d="M0 1024c0-234.666667 229.333333-423.04 512-423.04S1024 790.4 1024 1024" p-id="2782" fill="#ffffff"></path></svg>
            admin
        </div>
    </div>
    <div class="container">
        <!-- 上方区域 -->
        <div class="top">
            <!-- 上方左侧区域 -->
            <div class="top-left">
                <!-- 左上区域 -->
                <div class="top-left-top">
                    <div class="titleName">
                        嫌疑人列表
                    </div>
                    <div>
                        <div class="top-left-topBox" style="margin-bottom: 2vh;">
                            <div class="circleBox">
                                <div class="circleClik">
                                    <div>

                                    </div>
                                </div>
                                <div style="  color: rgba(25, 209, 255, 1);">
                                    在区
                                </div>
                            </div>

                            <div class="circleBox">
                                <div class="circleNoClik">
                                    <div>

                                    </div>
                                </div>
                                <div style="  color:  rgba(12, 96, 137, 1);">
                                    出区
                                </div>
                            </div>
                            <div class="input">
                                <svg style="margin-right: 3px;" t="1742007786143" class="icon"
                                     viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                     p-id="1490" width="16" height="16">
                                    <path
                                            d="M501.333333 64C731.093333 64 917.333333 250.24 917.333333 480a414.677333 414.677333 0 0 1-120.533333 292.842667l132.544 132.586666a32 32 0 1 1-45.248 45.248l-135.872-135.829333A414.144 414.144 0 0 1 501.333333 896C271.573333 896 85.333333 709.76 85.333333 480S271.573333 64 501.333333 64z m0 64C306.922667 128 149.333333 285.589333 149.333333 480S306.922667 832 501.333333 832 853.333333 674.410667 853.333333 480 695.744 128 501.333333 128z"
                                            fill="#ffffff" p-id="1491"></path>
                                </svg>
                                请输入姓名
                            </div>
                        </div>
                        <div class="table">
                            <div class="table1" style="background: rgba(30, 52, 102, 1);">
                                <div>
                                    姓名
                                </div>
                                <div>
                                    年龄
                                </div>
                                <div>
                                    问候室
                                </div>
                            </div>

                            <div class="table1" style="background: rgba(34, 67, 142, 1)">
                                <div>
                                    程志明
                                </div>
                                <div>
                                    38
                                </div>
                                <div>
                                    3问候室
                                </div>
                            </div>

                            <div class="table1" style="background: rgba(34, 67, 142, .27)">
                                <div>
                                    程志明
                                </div>
                                <div>
                                    38
                                </div>
                                <div>
                                    3问候室
                                </div>
                            </div>
                            <div class="table1" style="background: rgba(34, 67, 142, .27)">
                                <div>
                                    程志明
                                </div>
                                <div>
                                    38
                                </div>
                                <div>
                                    3问候室
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 左中区域 -->
                <div class="top-left-middle">

                    <div class="titleName">
                        详细信息
                    </div>
                    <div class="top-left-middle-Cont">
                        <div class="top-left-middle1">
                            <div>
                                <img src="images/portrait.png" alt="" style="width: 6.6vw;">

                            </div>
                            <div style="margin-left: 2vh;" class="top-left-middle1Left">
                                <div style="margin-bottom: 10px;">
                                    程志明 &nbsp;&nbsp;&nbsp; 男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 38岁
                                </div>
                                <div>
                                    手环编号：7664
                                </div>
                                <div>
                                    当前区域：楼道1
                                </div>
                                <div>
                                    入区时间：2025-02-27 12:10:21
                                </div>
                            </div>

                        </div>
                        <div class="top-left-middle2">
                            案由：利用邪教组织破坏法律实施犯罪利用邪教组织破坏 法律实施犯罪利用邪教组织破坏法律实施犯罪...
                        </div>
                    </div>

                    <div class="top-left-middle3">
                        <div>
                            <img src="images/camera.png" style="margin-right: 10px;">
                            实时点播
                        </div>
                        <div style="margin-left: 10px;">
                            <img src="images/video.png"  style="margin-right: 10px;">
                            回放点播

                        </div>
                    </div>
                </div>
            </div>
            <!-- 上方中间区域 -->
            <div class="top-middle">
                <iframe src ="./index.html" style="width: 100%;height: 100%;"></iframe>

            </div>
            <!-- 上方右侧区域 -->
            <div class="top-right">
                <div class="titleName">
                    在区人员告警
                </div>

                <div class="top-left-topBox" style="position: relative;margin-bottom: 0;">
                    <img src="images/sou.png" style="width: 100%;" alt="">
                    <div
                            style="position: absolute;color: rgba(187, 229, 253, 1);top: 1.8vh;left: 2vh; ">
                        输入搜索相关关键词语
                    </div>
                </div>
                <div class="top-left-topBox"
                     style="margin-top: 1vh;width: 80%;margin-left:4vh;justify-content: flex-start;">

                    <div class="circleBox">
                        <div class="circleClik">
                            <div>

                            </div>
                        </div>
                        <div style="  color: rgba(25, 209, 255, 1);">
                            全部
                        </div>
                    </div>

                    <div class="circleBox" style="margin-left:4vh">
                        <div class="circleNoClik">
                            <div>

                            </div>
                        </div>
                        <div style="  color:  rgba(12, 96, 137, 1);">
                            待处理
                        </div>
                    </div>
                    <div class="circleBox" style="margin-left:4vh">
                        <div class="circleNoClik">
                            <div>

                            </div>
                        </div>
                        <div style="  color:  rgba(12, 96, 137, 1);">
                            已处理
                        </div>
                    </div>

                </div>
                <div class="top-left-topBox" style="position: relative;margin-bottom: 0;margin-left:4vh;">
                    <div class="top-rightBox">

                    </div>
                </div>
            </div>
        </div>
        <!-- 下方区域 -->
        <div class="bottom">
            <!-- 下方左侧区域 -->
            <div class="bottom-left">
                <div class="titleName">
                    嫌疑人走势图
                </div>
                <div id="chart"></div>
            </div>
            <!-- 下方右侧区域 -->
            <div class="bottom-right">
                <div class="titleName">
                    分类统计
                </div>
                <div class="bottom-right-cont">
                    <div class="icon1" style="background: rgba(13,102,172,0.29);
                          border-radius: 8px;
                          border: 1px solid #0D66AC;">
                        <div class="img">
                            <img src="images/icon1.png" alt="">
                        </div>

                        <div class="text">
                            已预约未到达
                        </div>

                        <div style="color: rgba(85, 137, 252, 1);margin: 0 1vh 0.4vh 2vh;font-size: 30px;">0</div>
                        人
                    </div>


                    <div class="icon1" style="background: rgba(30,180,202,0.29);
                        border-radius: 8px;
                        border: 1px solid #1EB4CA;">
                        <div class="img">
                            <img src="images/icon2.png" alt="">
                        </div>
                        <div class="text">
                            已入区
                        </div>
                        <div style="color: rgba(30, 180, 202, 1);margin: 0 1vh 0.4vh 2vh;font-size: 30px;">3</div>
                        人
                    </div>

                    <div class="icon1" style="background: rgba(30,202,131,0.29);
                        border-radius: 8px;
                        border: 1px solid #1ECA83;">
                        <div class="img">
                            <img src="images/icon3.png" alt="">
                        </div>
                        <div class="text">
                            看押中
                        </div>
                        <div style="color: rgba(30, 202, 131, 1);margin: 0 1vh 0.4vh 2vh;font-size: 30px;">2</div>
                        人
                    </div>


                    <div class="icon1" style="background: rgba(202,143,30,0.29);
                        border-radius: 8px;
                        border: 1px solid #CA8F1E;">
                        <div class="img">
                            <img src="images/icon4.png" alt="">
                        </div>


                        <div class="text">
                            审讯中
                        </div>
                        <div style="color:rgba(237, 179, 74, 1);margin: 0 1vh 0.4vh 2vh;font-size: 30px;">0</div>
                        人
                    </div>

                    <div class="icon1" style="background: rgba(30,202,131,0.29);
                        border-radius: 8px;
                        border: 1px solid #1ECA83;">
                        <div class="img">
                            <img src="images/icon5.png" alt="">
                        </div>

                        <div class="text">
                            安检/信采/存放
                        </div>

                        <div style="color: rgba(30, 202, 131, 1);margin: 0 1vh 0.4vh 2vh;font-size: 30px;">2</div>
                        人
                    </div>



                    <div class="icon1" style="background: rgba(30,180,202,0.29);
                        border-radius: 8px;
                        border: 1px solid #1EB4CA;">
                        <div class="img">
                            <img src="images/icon6.png" alt="">
                        </div>

                        <div class="text">
                            今日裁决出区
                        </div>

                        <div style="color: rgba(30, 180, 202, 1);margin: 0 1vh 0.4vh 2vh;font-size: 30px;">0</div>
                        人
                    </div>

                    <div class="icon1" style="background: rgba(30,180,202,0.29);
                        border-radius: 8px;
                        border: 1px solid #1EB4CA;">
                        <div class="img">
                            <img src="images/icon7.png" alt="">
                        </div>
                        <div class="text">
                            临时出区
                        </div>
                        <div style="color: rgba(30, 180, 202, 1);margin: 0 1vh 0.4vh 2vh;font-size: 30px;">3</div>
                        人
                    </div>




                    <div class="icon1" style="background: rgba(202,143,30,0.29);
                        border-radius: 8px;
                        border: 1px solid #CA8F1E;">
                        <div class="img">
                            <img src="images/icon8.png" alt="">
                        </div>


                        <div class="text">
                            其他人员
                        </div>
                        <div style="color:rgba(237, 179, 74, 1);margin: 0 1vh 0.4vh 2vh;font-size: 30px;">0</div>
                        人
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    // function setRootFontSize() {
    //     // 获取屏幕宽度
    //     const screenWidth = window.innerWidth;
    //     // 假设设计稿宽度为 1920px，基础字体大小为 16px
    //     const baseWidth = 1920;
    //     const baseFontSize = 16;
    //     // 计算当前屏幕下的字体大小
    //     const fontSize = (screenWidth / baseWidth) * baseFontSize;
    //     // 设置根元素的字体大小
    //     document.documentElement.style.fontSize = fontSize + 'px';
    // }
    //
    // // 页面加载时设置字体大小
    // setRootFontSize();
    // // 窗口大小改变时重新设置字体大小
    // window.addEventListener('resize', setRootFontSize);

    const myChart = echarts.init(document.getElementById('chart'));

    const option = {
        grid: {
            left: '10%',
            right: '10%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#fff'
            },

            axisLabel: {
                color: 'rgba(135, 190, 229, 1)'
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(85, 148, 226,0.3)',
                    type: 'dashed'
                }
            },
            axisLine: {
                // 修改 y 轴 axisTick 的颜色为绿色
                lineStyle: {
                    color: 'rgba(10, 54, 117, 1)'
                }
            },
            axisTick: {
                // 修改 y 轴 axisTick 的颜色为绿色
                lineStyle: {
                    color: 'rgba(10, 54, 117, 1)'
                }
            },
            axisLabel: {
                color: 'rgba(135, 190, 229, 1)'
            }
        },
        series: [{
            data: [20,50,60,70,60,80,70,100,90,140,130,150,140,170,180],
            type: 'line',
            // smooth: true,
            lineStyle: {
                color: '#ffd700'
            },
            itemStyle: {
                color: '#ffd700'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255, 215, 0, 0.3)'
                },
                    {
                        offset: 1,
                        color: 'rgba(255, 215, 0, 0)'
                    }
                ])
            }
        }]
    };

    myChart.setOption(option);




    const now = new Date();

    // 获取当前小时数
    const hours = now.getHours();

    // 判断是上午还是下午
    const period = hours < 12 ? '上午' : '下午';

    // 获取最终显示的小时数，如果是 24 小时制超过 12 点的情况，转换为 12 小时制
    const displayHours = hours % 12 === 0 ? 12 : hours % 12;

    // 获取当前分钟数
    const minutes = now.getMinutes();
    // 确保分钟数为两位数显示，不足 10 时前面补 0
    const formattedMinutes = minutes.toString().padStart(2, '0');

    // 组合时段和时间信息
    const timeInfo = `${period} ${displayHours}:${formattedMinutes}`;

    // 将信息插入到 HTML 页面中
    const timeInfoElement = document.getElementById('time-info');
    timeInfoElement.textContent = timeInfo;
    // 获取当前日期对象
    const today = new Date();

    // 获取当前年份
    const year = today.getFullYear();
    // 获取当前月份（注意：月份从 0 开始计数，所以要加 1）
    const month = today.getMonth() + 1;
    // 获取当前日期
    const day = today.getDate();

    // 格式化日期为 x年x月x日 的形式
    const formattedDate = `${year}年${month}月${day}日`;

    // 定义星期几的数组
    const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    // 获取当前是星期几
    const dayOfWeek = daysOfWeek[today.getDay()];

    // 创建间隔 div 元素
    const separatorDiv = document.createElement('div');
    separatorDiv.classList.add('separator');

    // 创建显示日期的文本节点
    const dateTextNode = document.createTextNode(formattedDate);
    // 创建显示星期几的文本节点
    const dayOfWeekTextNode = document.createTextNode(dayOfWeek);

    // 获取显示信息的 p 元素
    const dateInfoElement = document.getElementById('date-info');

    // 将日期文本节点添加到 p 元素中
    dateInfoElement.appendChild(dateTextNode);
    // 将间隔 div 元素添加到 p 元素中
    dateInfoElement.appendChild(separatorDiv);
    // 将星期几文本节点添加到 p 元素中
    dateInfoElement.appendChild(dayOfWeekTextNode);
</script>
</body>

</html>
